<template>
   <div>
      <div>
        <!-- 搜索 -->
         <el-input v-model="renderJournal.targetAdminId" placeholder="请输入管理ID" size="" class="input-length"/>
       <el-button type="primary" :icon="Search" @click="handSearch">查找</el-button>
      </div>
   <div>
    <!-- 列表 -->
    <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
        <el-table-column prop="id" label="日志ID" width="180" align="center"/>
        <el-table-column prop="adminId" label="管理员ID" width="180" align="center"/>
        <el-table-column prop="requestId" label="请求ID" width="180" align="center" />
        <el-table-column prop="group" label="API分组" width="180" align="center"/>
        <el-table-column prop="method" label="API方法" width="180" align="center"/>
        <el-table-column prop="gmtCreate" label="操作日期" align="center"/>
    </el-table>
    <Pagings v-bind="pagination" @emitfather="CurrentList" ></Pagings>
   </div>

</div>
 </template>
 
 <script lang="ts" setup>
 import { Search} from '@element-plus/icons-vue'//图标
 import { ref,onMounted,reactive, } from 'vue'
 import {post} from '@/utlis/http'
 import {friendTime} from '@/utlis/PackagingTime'//时间戳
 import Pagings from '@/components/paging/Pagings.vue'//分页
 import  type{journal} from '@/type/types'//类型
 import {classPagination} from '#/index'
 const pagination=reactive(new classPagination())
 const tableData = ref([])//渲染类别
let renderJournal=ref<journal>({//请求参数
  _gp:'admin.log',//分组
  _mt:'list',//方法名
  targetAdminId:'',//管理员id
  page:1,
  limit:10
})
/*请求接口并处理是时间戳*/
function render(){
  post(renderJournal.value).then(res=>{
    console.log(res);
    let {items}=res.data
    tableData.value=items.map((item:any)=>{
      item.gmtCreate=friendTime(item.gmtCreate)
      return item
    })
    pagination.total=res.data.total//总条数
  })
}
function handSearch(){//查找
  render()
}

onMounted(() => {//挂载
  render()
})

// 分页
function CurrentList(v:any){
  renderJournal.value.page=v.pageNo
  renderJournal.value.limit=v.pageSize
   render()
}
 </script>
 <style scoped>
.input-length{
   width: 200px;
   margin-right: 10px;
}

</style>